<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/login.css">
    <script src="vue.js" type="text/javascript"></script>
    <script src="jquery.1.8.js" type="text/javascript"></script>
</head>
<body style="background-image: url(images/bg.png);background-repeat: no-repeat;background-size: cover;">

 <div  id="app" class="out">

  <div class="top">
    Vue实训
    <img src="images/1.png"/>
  </div>

   <div class="text">
     <input type="text" v-model="loginName" placeholder="用户名"/>
   </div>

   <div class="text">
    <input type="text" v-model="pwd" placeholder="密码"/>
   </div>

   <div class="bottom" @click="login">登录</div> 
   
 </div>
</body>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      loginName:'',
      pwd:''
    },
    methods: {
        // 定义事件处理方法showInfo
      login () {

        $.ajaxSetup({
          contentType:"application/json;charset=utf-8"
        });

        var data= {"loginName":this.loginName,"pwd":this.pwd}

        $.post("http://api.tutestudio.net/api/login",JSON.stringify(data),function(res){
          if(res.code==200){
            alert("登陆成功")
            location.href='home.html'
          }else{
            alert("登录失败")
          }
        
        })



      //  if(this.loginName=="admin"&&this.pwd=="111"){
      //    alert("登陆成功")
      //  }else{
      //    alert("登录失败")
      //  }
      }
     
      }
      })
  
</script>
</html>